<template>
  <div id="myPaper">
    <div class="title">我的试卷</div>
    <div class="wrapper">
      <ul class="top">
        <li class="order">
          <el-badge :value="pagination.total" class="item" type="primary" @click="getMyAllExamPage">
            <span>全部</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="before" class="item" type="primary" @click="allExam.arr=examInfo.before">
            <span>未开始</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="after" class="item" type="primary" @click="allExam.arr=examInfo.after">
            <span>已完成</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="completed" class="item" type="primary" @click="allExam.arr=examInfo.completed">
            <span>已开始</span>
          </el-badge>
        </li>
        <li class="order">
          <el-badge :value="overdue" class="item" @click="allExam.arr=examInfo.overdue">
            <span>已过期</span>
          </el-badge>
        </li>
        <li class="search-li">
          <input type="text" placeholder="试卷名称" class="search" v-model="search">
          <el-button class="search-button" type="primary" @click="Search()" plain>
            <el-icon class="el-icon--left"><Search/></el-icon>
            搜索试卷
          </el-button>
        </li>
      </ul>
      <ul class="paper" v-loading="loading">
        <li class="item"
            v-for="(item,index) in allExam.arr"
            :key="index"
            @mouseenter="enter(index)"
            @mouseleave="leave(index)">
          <div class="examinfo">
            <h4 @click="toExamMsg(item.id)">{{item.subject}}</h4>
            <p class="name">{{item.description}}</p>
            <span><el-icon><Clock/></el-icon>{{item.examDate.substring(0,10)}}</span>&nbsp;&nbsp;
            <span v-if="item.time != null">限时{{item.time}}分钟</span>&nbsp;&nbsp;
            <span>满分{{item.examScore}}分</span>&nbsp;&nbsp;
            <span class="msg" @click="toExamMsg(item)" v-if="flag && index === current">进入考试</span>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <el-config-provider :locale="zhCn">
          <el-pagination
              @size-change="pageSizeChange"
              @current-change="pageNumChange"
              :current-page="pagination.pageNum"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>
        </el-config-provider>
      </div>
    </div>
  </div>
</template>

<script>
import {computed, getCurrentInstance, onMounted, reactive, ref} from "vue";
import {Search,Clock} from '@element-plus/icons-vue'
import {useRouter} from "vue-router/dist/vue-router";
import {ElMessage} from "element-plus";
import {getTime} from "@/utils/funUtils";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
  name: "myPaperList",
  components: {Search,Clock},
  setup(){
    const router = useRouter()
    const {proxy} = getCurrentInstance()
    const date = getTime(new Date())
    let flag = ref(false)
    let current = ref(null)//鼠标移动到的当前页
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 3 //每页条数
    })
    let loading = ref(false) //加载标识符
    let allExam = reactive({
      arr: [], //分页考试数据，展示
      all: []  //所有考试数据
    })
    let examInfo = reactive({//考试信息
      //未开始的考试
      before: [],
      beforeNum: 0,
      //已完成的考试
      after: [],
      afterNum: 0,
      //已开始的考试
      completed: [],
      completedNum: 0,
      //过期未作答的考试
      overdue: [],
      overdueNum: 0
    })
    let search = ref("")
    let before = computed(()=>{
      allExam.all.forEach((item)=>{
        const examdate = getTime(new Date(item.examDate))
        if (date < examdate){
          examInfo.beforeNum = examInfo.before.push(item)
        }
      })
      return examInfo.beforeNum
    })
    let overdue = computed(()=>{
      return examInfo.overdueNum
    })
    let after = computed(()=>{
      return examInfo.afterNum
    })
    let completed = computed(()=>{
      allExam.all.forEach((item)=>{
        const examdate = getTime(new Date(item.examDate))
        if (date.substring(0,10) === examdate.substring(0,10)){
          examInfo.completedNum = examInfo.completed.push(item)
        }
      })
      return examInfo.completedNum
    })
    onMounted(()=>{//挂载后进行初始化
      getMyAllExamPage()
      getMyAllExam()
    })
    function isOverdueAndAfter(){
      loading.value = true
      allExam.all.forEach((item)=>{
        const examdate = getTime(new Date(item.examDate))
        if (date.substring(0,10) > examdate.substring(0,10)){
          proxy.$axios.get(
              // eslint-disable-next-line no-undef
              `/score/${$cookies.get("id")}/${item.id}`
          ).then(
              response => {
                if (response.data === true){
                  examInfo.afterNum = examInfo.after.push(item)
                }else if (response.data === false){
                  examInfo.overdueNum = examInfo.overdue.push(item)
                }
                loading.value = false
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }
      })
    }
    function getMyAllExamPage() {
      loading.value = true
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/exams/${$cookies.get("id")}/${pagination.pageNum}/${pagination.pageSize}`
      ).then(
          response => {
            allExam.arr = [...response.data.list]
            pagination.total = response.data.total
            pagination.pageNum = response.data.pageNum
            pagination.pageSize = response.data.pageSize
            loading.value = false
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function getMyAllExam(){
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/exams/${$cookies.get("id")}`
      ).then(
          response => {
            allExam.all = [...response.data]
            isOverdueAndAfter()
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getMyAllExamPage()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getMyAllExamPage()
    }
    function Search(){//搜索试卷
      allExam.arr = allExam.all.filter((item)=>{
        return item.subject.includes(search.value)
      })
      search.value = ""
    }
    //跳转到试卷详情页
    function toExamMsg(data) {
      allExam.all.forEach((item)=>{
        const examdate = getTime(new Date(item.examDate))
        if (item.id === data.id) {
          if (date.substring(0,10) < examdate.substring(0,10)) {
            ElMessage({
              type: 'error',
              message: '考试未开始',
            })
            return
          } else if (date.substring(0,10) > examdate.substring(0,10)) {
            ElMessage({
              type: 'error',
              message: '考试已结束',
            })
            return
          }else {
            router.push({path: '/examMsg', query: {id: data.id}})
          }
        }
      })

    }
    function enter(index) {
      flag.value = true
      current.value = index
    }
    function leave(index) {
      flag.value = false;
      current.value = index;
    }
    return{
      pagination,
      loading,
      allExam,
      before,
      after,
      overdue,
      examInfo,
      completed,
      search,
      flag,
      current,
      enter,
      leave,
      Search,
      toExamMsg,
      pageSizeChange,
      pageNumChange,
      getMyAllExamPage,
      zhCn
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
#myPaper {
  width: 980px;
  margin: 0 auto;
  margin-top: 20px;
}
.title {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}

#myPaper{
  background-color: #fff;
  padding: 20px;

}
.search-button{
  margin-left: 10px;
}
.search {
  margin-left: auto;
  width: 200px;
  height: 35px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

#myPaper li {
  margin-left: auto;
}
.top li {
  margin-left: auto;
}
li{
  margin-top: 5px;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
}
.top .search-li{
  margin-top: 10px;
  padding-left: 300px;
}
.examinfo {
  background-color: #eee;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 5px;
  position: relative;
  transition: all .3s ease;
}
.msg {
  position: absolute;
  right: 30px;
  bottom: 15px;
  color: tomato;
  cursor: pointer;
  transition: all .3s ease;
}
</style>